<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>总览</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/header.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link type="text/css" rel="stylesheet" href="./css/jedate/jedate.css">
  <style></style>
</head>

<body>
  <div class="header">
    <div class="header-container-place"></div>
    <div class="header-container">
      <div class="header-nav">
        <div class="header-logo">
          <img class="logo-img" src="./img/header-logo.png" alt="" />
          <!-- <span class="logo-text">工商银行声誉风控管理平台</span> -->
        </div>
        <div class="navs">
          <div>
            <a href="" class="item active">
              <img src="./img/icon-zl.png" alt="" />
              <div>总览</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-fxts.png" alt="" />
              <div>风险提示</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-jrzx.png" alt="" />
              <div>今日资讯</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-yqyj.png" alt="" />
              <div>舆情预警</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-yqjb.png" alt="" />
              <div>舆情简报</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-scgl.png" alt="">
              <div>舆情智库</div>
            </a>
          </div>
          <div>
            <a href="" class="item">
              <img src="./img/icon-scgl.png" alt="" />
              <div>收藏管理</div>
            </a>
          </div>
          <div class="btn-group">
            <a href="" class="item dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              <img src="./img/icon-xtgl.png" alt="">
              <div>系统管理<img class="bottom-icon" src="./img/bottom-icon.png" alt=""></div>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">企业基本信息</a></li>
              <li><a href="#">个人基本信息</a></li>
              <li><a href="#">分行管理</a></li>
              <li><a href="#">支行管理</a></li>
              <li><a href="#">角色管理</a></li>
              <li><a href="#">员工管理</a></li>
            </ul>
          </div>
        </div>
        <div class="btn-group">
          <div class="user-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <div class="user-head">
              <img src="./img/user-head.png" alt="" />
            </div>
            <div class="name">
              诸葛亮
              <img class="icon-arrow" src="./img/icon-arrow-down.png" alt="" />
            </div>
          </div>
          <ul class="dropdown-menu">
            <li><a href="#">个人中心</a></li>
            <li><a href="#">退出</a></li>
          </ul>
        </div>
      </div>
      <div class="breadcrumb-view">
        <div class="current-path">
          当前位置：<span><img width="16" height="16" src="./img/icon-home.png" alt="" />总览</span>
        </div>
        <div class="history-list">
          <div>
            风险提示
            <img src="./img/icon-close.png" class="icon-close" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="content-page">
    <div class="container">
      <div class="row">
        <div class="col col-md-2">
          <div class="col-content col-content-zhxq">
            <div class="top">
              <div class="label-title">
                <div class="left">
                  <img width="14" height="15" src="./img/index-zhxq.png" alt="">
                  <span>账号详情</span>
                  <img width="14" height="14" src="./img/index-help.png" alt="">
                </div>
              </div>
              <div class="user-head">
                <div class="head-img"><img src="./img/user-head.png" alt=""></div>
                <div class="btn-group">
                  <div class="user-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    <div class="name">
                      诸葛亮
                      <img class="icon-arrow" src="./img/icon-arrow-down.png" alt="" />
                    </div>
                  </div>
                  <ul class="dropdown-menu">
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">退出</a></li>
                  </ul>
                </div>
              </div>
              <div class="data-list">
                <div class="data-list-item">
                  <div class="num">12条</div>
                  <span>待分办数</span>
                </div>
                <div class="data-list-item">
                  <div class="num">12条</div>
                  <span>待评办数</span>
                </div>
                <div class="data-list-item">
                  <div class="num">12条</div>
                  <span>已完结数</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <p>
                <img src="./img/date-icon.png" alt="">
                <span>上次登录：</span>
                <i>2024.01.01 12:55:44</i>
              </p>
              <p>
                <img src="./img/date-icon.png" alt="">
                <span>账号到期：</span>
                <i>2024.01.01 12:55:44</i>
              </p>
              <p>
                <img src="./img/icon-user.png" alt="">
                <span>七天登录次数：</span>
                <i>3次</i>
              </p>
            </div>
          </div>
        </div>
        <div class="col col-md-3">
          <div class="col-content col-content-yjxx">
            <div class="label-title label-title-black">
              <div class="left">
                <img width="14" height="15" src="./img/index-yjxx.png" alt="">
                <span>预警消息</span>
                <img width="14" height="14" src="./img/index-help.png" alt="">
              </div>
              <div class="right">
                <div class="more-btn">更多<img src="./img/icon-arrow-right.png" alt=""></div>
              </div>
            </div>
            <ul>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
              <li>
                <img src="./img/index-yjxx2.png" alt="">
                <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                <div class="date">2021-20-20</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="col col-md-4">
          <div class="col-content col-content-yjxx">
            <div class="label-title label-title-black">
              <div class="left">
                <img width="14" height="15" src="./img/index-lyzb.png" alt="">
                <span>来源占比</span>
                <img width="14" height="14" src="./img/index-help.png" alt="">
              </div>
              <div class="right">
                <div class="more-btn">更多<img src="./img/icon-arrow-right.png" alt=""></div>
              </div>
            </div>
            <div class="echarts-content1">
              <img class="icon-download" id="downLoad1" src="./img/icon-download.png" alt="">
              <div id="echarts-lyzb"></div>
            </div>
          </div>
        </div>
        <div class="col col-md-3">
          <div class="col-content" style="margin: 0;">
            <div class="col-content col-content-yjxx">
              <div class="label-title label-title-black">
                <div class="left">
                  <img width="14" height="15" src="./img/index-zmxx1.png" alt="">
                  <span>正面信息</span>
                  <img width="14" height="14" src="./img/index-help.png" alt="">
                </div>
                <div class="right">
                  <div class="more-btn">更多<img src="./img/icon-arrow-right.png" alt=""></div>
                </div>
              </div>
              <ul>
                <li>
                  <img class="icon-hot" src="./img/icon-hot.png" alt="">
                  <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                  <div class="date">2021-20-20</div>
                </li>
                <li>
                  <img class="icon-hot" src="./img/icon-hot.png" alt="">
                  <div class="text">ahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashjahdjashjdashj</div>
                  <div class="date">2021-20-20</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row row2">
        <div class="col col-md-2">
          <div class="col-content">
            <div class="label-title label-title-black">
              <div class="left">
                <img width="14" height="15" src="./img/index-yqzl.png" alt="">
                <span>舆情总量</span>
                <img width="14" height="14" src="./img/index-help.png" alt="">
              </div>
              <div class="right">
                <div class="more-btn">更多<img src="./img/icon-arrow-right.png" alt=""></div>
              </div>
            </div>
            <ul class="card-list">
              <li style="--bg-url: url('../img/bg1.png')">
                <div class="top">
                  <div class="icon-img"><img src="./img/index-yqxx.png" alt=""></div>
                  <span>舆情信息</span>
                </div>
                <div class="bottom">
                  511
                </div>
              </li>
              <li style="--bg-url: url('../img/bg2.png')">
                <div class="top">
                  <div class="icon-img"><img src="./img/index-yjxx1.png" alt=""></div>
                  <span>舆情信息</span>
                </div>
                <div class="bottom">
                  511111
                </div>
              </li>
              <li style="--bg-url: url('../img/bg3.png')">
                <div class="top">
                  <div class="icon-img"><img src="./img/index-yjxx2.png" alt=""></div>
                  <span>舆情信息</span>
                </div>
                <div class="bottom">
                  511
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="col col-md-10">
          <div class="col-content">
            <div class="label-title label-title-black">
              <div class="left">
                <img width="14" height="15" src="./img/index-yqzs.png" alt="">
                <span>舆情走势</span>
                <img width="14" height="14" src="./img/index-help.png" alt="">
              </div>
              <div class="right">
                <div class="select-date-box">
                  <em>时间：</em>
                  <span class="active">今天</span>
                  <span>24小时</span>
                  <span>2天</span>
                  <span>3天</span>
                  <span>7天</span>
                  <span>自定义</span>
                </div>
                <div class="date-range">
                  <div class="date-input">
                    <input readonly type="text" class="jeinput" id="start-date" placeholder="请选择">
                    <img class="icon-arrow start-date-arrow" src="./img/icon-arrow-down.png" alt="">
                  </div>
                  <span>至</span>
                  <div class="date-input">
                    <input readonly type="text" class="jeinput" id="end-date" placeholder="请选择">
                    <img class="icon-arrow end-date-arrow" src="./img/icon-arrow-down.png" alt="">
                  </div>
                </div>
                <div class="more-btn">更多<img src="./img/icon-arrow-right.png" alt=""></div>
              </div>
            </div>
            <div class="echarts-content">
              <div class="legend-content">
                <ul>
                  <li>
                    <span class="tag" style="--bg-color: #1a8ddb;"></span>
                    <label>正面：<span>90条</span></label>
                    <div>占比：<span style="--color: rgba(26, 141, 219, 1)">18%</span></div>
                  </li>
                  <li>
                    <span class="tag" style="--bg-color: rgba(230, 126, 34, 1);"></span>
                    <label>中性：<span>90条</span></label>
                    <div>占比：<span style="--color: rgba(230, 126, 34, 1)">18%</span></div>
                  </li>
                  <li>
                    <span class="tag" style="--bg-color: rgba(216, 71, 92, 1);"></span>
                    <label>负面：<span>90条</span></label>
                    <div>占比：<span style="--color: rgba(216, 71, 92, 1)">18%</span></div>
                  </li>
                </ul>
                <img class="icon-download" id="downLoad" src="./img/icon-download.png" alt="">
              </div>
              <div id="echarts-yqzs"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/jedate.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script>
  /**
   * 鼠标划过就展开子菜单，免得需要点击才能展开
   */
  function dropdownOpen () {

    var $dropdownLi = $('li.dropdown');

    $dropdownLi.mouseover(function () {
      $(this).addClass('open');
    }).mouseout(function () {
      $(this).removeClass('open');
    });
  }
  $(document).ready(function () {
    $(document).off('click.bs.dropdown.data-api');
    dropdownOpen();//调用
  });
  var chartDom = document.getElementById('echarts-yqzs');
  var myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '20',
      right: '33',
      bottom: '20',
      containLabel: true
    },
    toolbox: {
      // feature: {
      //   saveAsImage: {}
      // }
    },
    color: ['rgba(26, 141, 219, 1)', 'rgba(230, 126, 34, 1)', 'rgba(216, 71, 92, 1)'],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(234, 238, 249, 1)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(135, 142, 154, 1)'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(234, 238, 249, 1)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(135, 142, 154, 1)'
        }
      }
    },
    series: [{
      name: '正面',
      type: 'line',
      stack: 'Total',
      smooth: true,
      showSymbol: false,
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '中性',
      type: 'line',
      stack: 'Total',
      smooth: true,
      showSymbol: false,
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '负面',
      type: 'line',
      stack: 'Total',
      smooth: true,
      showSymbol: false,
      data: [150, 232, 201, 154, 190, 330, 410]
    }
    ]
  };
  myChart.setOption(option);

  $('#downLoad').click(function () {
    saveEChartAsImage(myChart)
  })


  function saveEChartAsImage (chart) {
    var imgDataURL = chart.getDataURL({
      // 导出的格式，可以是 'png', 'jpeg'
      type: 'png',
      // 导出的图片分辨率比例，默认为 1
      pixelRatio: 2,
      // 导出的图片背景色，默认是 'white'
      backgroundColor: '#ffffff'
    });

    // 创建一个链接元素
    var saveLink = document.createElement('a');

    // 使用Blob和URL.createObjectURL创建一个可下载的链接
    saveLink.href = imgDataURL;
    // 设置下载的文件名
    saveLink.download = 'echart_image';
    // 触发点击
    saveLink.click();
  }


  var chartDom1 = document.getElementById('echarts-lyzb');
  var myChart1 = echarts.init(chartDom1);
  var option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 60,
      top: 20,
      bottom: 20,
    },
    series: [{
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '65%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      position: 'outside',
      minAngle: 5,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 1048,
        name: 'Search Engine\n6.26%'
      },
      {
        value: 735,
        name: 'Direct\n6.26%'
      },
      {
        value: 580,
        name: 'Email\n6.26%'
      },
      {
        value: 484,
        name: 'Union Ads\n6.26%'
      },
      {
        value: 300,
        name: 'Video Ads\n6.26%'
      }
      ]
    },
    {
      name: '内圆',
      type: 'pie',
      silent: true,
      radius: ['40%', '55%'],
      center: ['35%', '50%'],
      data: [{
        value: 1048,
        name: 'Search Engine\n6.26%'
      },
      {
        value: 735,
        name: 'Direct\n6.26%'
      },
      {
        value: 580,
        name: 'Email\n6.26%'
      },
      {
        value: 484,
        name: 'Union Ads\n6.26%'
      },
      {
        value: 300,
        name: 'Video Ads\n6.26%'
      }],
      minAngle: 5,
      hoverAnimation: false,
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
      emphasis: {
        scale: false,
      },
      itemStyle: {
        color: function (params) {
          return 'rgba(255, 255, 255, .6)'
        }
      },
    }
    ]
  };
  myChart1.setOption(option1);

  $('#downLoad1').click(function () {
    saveEChartAsImage(myChart1)
  })


  $('.select-date-box span').click(function () {
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
  })
  jeDate("#start-date", {
    format: "YYYY-MM-DD",
    isinitVal: true,
    onClose: false
  });
  jeDate("#end-date", {
    format: "YYYY-MM-DD",
    isinitVal: true
  });
  $('#start-date').focus(function () {
    $('.start-date-arrow').addClass('active')
  })
  $('#start-date').blur(function () {
    $('.start-date-arrow').removeClass('active')
  })
  $('#end-date').focus(function () {
    $('.end-date-arrow').addClass('active')
  })
  $('#end-date').blur(function () {
    $('.end-date-arrow').removeClass('active')
  })
</script>

</html>